<template>
  <el-row :gutter="20" style="margin: 3px 0" class="ps_tool">
    <el-col :xs="24" :sm="4" :md="4" :lg="5" :xl="4" style="padding-left: 0">
      <el-select
        v-model="pxypm"
        clearable
        filterable
        remote
        placeholder="排序1品名"
        style="width: 100%"
      >
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-col>
    <el-col :xs="24" :sm="4" :md="4" :lg="5" :xl="4">
      <el-select
        v-model="pxelx"
        clearable
        filterable
        remote
        placeholder="排序2类型"
        style="width: 100%"
      >
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-col>
    <el-col :xs="24" :sm="4" :md="4" :lg="5" :xl="4">
      <el-select
        v-model="pxsbj"
        clearable
        filterable
        remote
        placeholder="排序3柄径"
        style="width: 100%"
      >
        <el-option
          v-for="item in options3"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-col>
    <el-col :xs="24" :sm="4" :md="4" :lg="5" :xl="4">
      <el-select
        v-model="pxsdp"
        clearable
        filterable
        remote
        placeholder="排序4刀片"
        style="width: 100%"
      >
        <el-option
          v-for="item in options4"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-col>

    <el-button type="primary" icon="Search" @click="submit">载入</el-button>
    <el-button color="#626aef" @click="toExcel()">导出</el-button>
  </el-row>

  <div class="ps_tool">
    <el-button
    v-for="item in options"
    :key="item.OrderID"
    @click="show(item)"
    class="default-button-style"
  >
    {{ item.OrderName }}
  </el-button>
  </div>

  <el-table
    v-loading="loading"
    element-loading-text="Loading..."
    :row-class-name="tableRowClassName"
    :data="tableData"
    stripe
    style="width: 100%"
    :cell-style="{ color: '#000' }"
    id="table"
    border
  >
    <el-table-column
      align="center"
      prop="serwno"
      label="序号"
      width="40"
      show-overflow-tooltip
    />
    <el-table-column
      align="center"
      prop="MkNo"
      label="工单单号"
      show-overflow-tooltip
    />
    <el-table-column
      min-width="120"
      align="left"
      prop="ProdName"
      label="产品名称"
      show-overflow-tooltip
    />
    <el-table-column
      min-width="120"
      align="left"
      prop="ProdSize"
      label="规格型号"
      show-overflow-tooltip
    />
    <el-table-column
      align="left"
      prop="pxypm"
      label="排序1品名"
      show-overflow-tooltip
    />
    <el-table-column
      align="left"
      prop="pxelx"
      label="排序2类型"
      show-overflow-tooltip
    />
    <el-table-column
      min-width="60"
      align="left"
      prop="pxsbj"
      label="排序3柄径"
    />
    <el-table-column
      align="left"
      prop="pxsdp"
      label="排序4刀片"
      show-overflow-tooltip
    />
    <el-table-column min-width="70" align="left" prop="OrderID" label="工序" />
    <el-table-column
      align="center"
      min-width="80"
      prop="Quantity"
      label="工单总数"
    />
    <el-table-column
      align="center"
      min-width="80"
      prop="GoodQty"
      label="累计良品"
    />
    <el-table-column
      align="center"
      min-width="90"
      prop="dscsl"
      label="待生产数量"
    />
    <el-table-column
      align="center"
      min-width="100"
      prop="kaigongSJ"
      label="开工时间"
      show-overflow-tooltip
    />
  </el-table>

  <el-pagination
    class="pagination"
    v-model:current-page="page.pageCurrent"
    background
    layout="prev, pager, next,total"
    :total="page.total"
    v-model:page-size="page.pageSize"
  ></el-pagination>
</template>

<script setup>
import { gxkbHS, getgxxxNow } from '@/api/processClassNow.js'
import { ref, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { exportExcel } from '@/utils/exportExcel.js'
import { _objArrFilter } from '@/utils/globalMethod'

const loading = ref(true)
let tableData = ref([])

/* 分页 */
const page = ref({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})

const options1 = ref([])
const options2 = ref([])
const options3 = ref([])
const options4 = ref([])

let OrderID = ref()
let pxypm = ref() // 排序1品名
let pxelx = ref() // 排序2类型
let pxsbj = ref() // 排序3柄径
let pxsdp = ref() // 排序4刀片
const allData = ref()
const options = ref([
  {
    OrderName: '全部',
    OrderID: ''
  }
])

const submit = async () => {
  page.value.pageCurrent = 1
  loading.value = true
  let gx = OrderID.value
  const { data, total } = await gxkbHS({
    OrderID: gx,
    pxypm: pxypm.value,
    pxelx: pxelx.value,
    pxsbj: pxsbj.value,
    pxsdp: pxsdp.value
  })
  page.value.total = total
  allData.value = data

  updateTableData()
  loading.value = false
}

/* @description table 区分颜色 */
const tableRowClassName = ({ row, column }) => {
  if (row.gdzk == 2) {
    return 'warning-row'
  } else if (row.gdzk == 1) {
    return 'success-row'
  }
  return 'white'
}

/* @description 点击工序按钮出现对应的工序数据 */
const show = async item => {
  page.value.pageCurrent = 1
  let gx = item.OrderID
  loading.value = true
  const { data, total } = await gxkbHS({
    OrderID: gx,
    pxypm: pxypm.value,
    pxelx: pxelx.value,
    pxsbj: pxsbj.value,
    pxsdp: pxsdp.value
  })
  loading.value = false
  page.value.total = total
  allData.value = data
  updateTableData()
}
//导出
const toExcel = () => {
  try {
    const titleArr = [
      { label: '序号', key: 'serwno' },
      { label: '工单单号', key: 'MkNo' },
      { label: '产品名称', key: 'ProdName' },
      { label: '规格型号', key: 'ProdSize' },
      { label: '排序1品名', key: 'pxypm' },
      { label: '排序2类型', key: 'pxelx' },
      { label: '排序3柄径', key: 'pxsbj' },
      { label: '排序4刀片', key: 'pxsdp' },
      { label: '工序', key: 'OrderID' },
      { label: '工单总数', key: 'Quantity' },
      { label: '累计良品', key: 'GoodQty' },
      { label: '待生产数量', key: 'dscsl' },
      { label: '开工时间', key: 'kaigongSJ' }
    ]
    exportExcel(allData.value, new Date().getTime(), titleArr)
    ElMessage({
      type: 'success',
      message: '导出成功!'
    })
  } catch (e) {
    ElMessage.error('导出失败,失败信息:!')
  }
}

// 顶部工序的时间循环
onMounted(async () => {
  const { data: _data } = await getgxxxNow()
  options.value = _data
  page.value.pageCurrent = 1
  loading.value = true
  let gx = OrderID.value
  const { data, total } = await gxkbHS({
    OrderID: gx,
    pxypm: pxypm.value,
    pxelx: pxelx.value,
    pxsbj: pxsbj.value,
    pxsdp: pxsdp.value
  })
  page.value.total = total
  allData.value = data

  options1.value = _objArrFilter(data, 'pxypm')
  options2.value = _objArrFilter(data, 'pxelx')
  options3.value = _objArrFilter(data, 'pxsbj')
  options4.value = _objArrFilter(data, 'pxsdp')

  updateTableData()
  loading.value = false
})

watch(
  () => page.value.pageCurrent,
  () => {
    updateTableData()
  }
)

const updateTableData = () => {
  tableData.value = allData.value.slice(
    (page.value.pageCurrent - 1) * page.value.pageSize,
    page.value.pageSize * page.value.pageCurrent
  )
}
</script>

<style lang="scss" scoped>
.pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 10px;
  text-align: center;
}
</style>
